<template>
	<view class="container">
	  <!-- 顶部搜索 -->
	  <view class="header">
		<view class="search-box">
		  <text class="iconfont icon-xiazai5"></text>
		  <input type="text" placeholder="搜索线上课程" v-model="searchText" @confirm="searchCourses" />
		</view>
	  </view>
	  
	  <!-- 轮播图 -->
	  <!-- <view class="swiper" v-if="bannerList.length">
		<swiper indicator-dots="true" :autoplay="true" :circular="true" :interval="3000"
		  :duration="500" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
		  <block v-for="(item,index) in bannerList" :key="index">
			<swiper-item>
			  <view class='slide-navigator acea-row row-between-wrapper' hover-class='none'>
				<image :src="item.pic" class="slide-image" mode="aspectFill" lazy-load></image>
			  </view>
			</swiper-item>
		  </block>
		</swiper>
	  </view> -->
	  
	  <!-- 分类标签 -->
	  <!-- <view class="filter-bar">
		<view class="filter-item" :class="{ active: activeFilter === 'all' }" @click="setFilter('all')">全部</view>
		<view class="filter-item" :class="{ active: activeFilter === 'newest' }" @click="setFilter('newest')">最新</view>
		<view class="filter-item" :class="{ active: activeFilter === 'popular' }" @click="setFilter('popular')">热门</view>
		<view class="filter-item" :class="{ active: activeFilter === 'free' }" @click="setFilter('free')">免费</view>
	  </view> -->
	  
	  <!-- 线上课程推荐 -->
	  <view class="course-section">
		<view class="section-title">精品线上课程</view>
		<view class="course-list" v-if="courseList.length > 0">
		  <view class="course-item" v-for="(item, index) in courseList" :key="index" @click="goToCourseDetail(item)">
			<view class="course-left">
			  <image :src="item.image" mode="aspectFill"></image>
			  <text class="lesson-tag">线上</text>
			  <text class="episode-count" v-if="item.totalEpisodes">{{item.totalEpisodes}}课时</text>
			</view>
			<view class="course-right">
			  <view class="course-title">{{item.storeName}}</view>
			  <view class="course-desc">{{item.storeInfo || '暂无简介'}}</view>
			  <view class="course-price">
				<view>
				  <text class="price-tag">¥</text>
				  <text class="price-value">{{item.price}}</text>
				  <view class="old-price" v-if="item.otPrice">¥{{item.otPrice}}</view>
				</view>
				<view class="buy-now" @click="goToCourseDetail(item)">立即学习</view>
			  </view>
			</view>
		  </view>
		</view>
	  </view>
	  
	  <view class="empty-state" v-if="!loading && courseList.length === 0">
		<image src="/static/images/empty-courses.png" mode="aspectFit"></image>
		<text>暂无线上课程</text>
		<button type="primary" size="mini" @click="retryCourseList">重新加载</button>
	  </view>
	  
	  <view class="loading" v-if="loading">
		<view class="spinner"></view>
		<text class="loading-text">加载中...</text>
	  </view>
	  
	  <view class="mores-txt flex" v-if="!hasMore && courseList.length > 0">
		<text>我是有底线的</text>
	  </view>
	</view>
  </template>
  
  <script>
  import { getProductslist, getProductDetail } from '@/api/store.js'
  
  export default {
	data() {
	  return {
		bannerList: [
		  { pic: 'https://dong-1323115148.cos.ap-guangzhou.myqcloud.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250516162552.png' },
		  { pic: 'https://dong-1323115148.cos.ap-guangzhou.myqcloud.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250516162552.png' }
		],
		courseList: [],
		loading: false,
		searchText: '',
		activeFilter: 'all',
		page: 1,
		limit: 10,
		hasMore: true
	  }
	},
	onLoad() {
	  this.getCourses()
	},
	methods: {
	  getCourses() {
		if (!this.hasMore || this.loading) return
		
		this.loading = true
		
		// 构建请求参数
		const params = {
		  page: this.page,
		  limit: this.limit,
		  cid: 752,  // 线上课程分类ID
		  isCourse: true  // 标识为课程
		}
		
		// 添加搜索条件
		if (this.searchText) {
		  params.keywords = this.searchText
		}
		
		// 添加排序条件
		if (this.activeFilter === 'newest') {
		  params.order = 'desc'
		  params.sort = 'id'
		} else if (this.activeFilter === 'popular') {
		  params.order = 'desc'
		  params.sort = 'sales'
		} else if (this.activeFilter === 'free') {
		  params.price = 0
		}
		
		getProductslist(params).then(res => {
		  this.loading = false
		  
		  if (res.data && res.data.list) {
			// 增加额外筛选，确保只有courseType为true且isShow为true的课程，并且包含分类752
			const onlineCourses = res.data.list.filter(item => 
			  item.courseType === true && item.isShow === true && 
			  (item.cateId && item.cateId.includes('752'))
			);
			
			if (this.page === 1) {
			  this.courseList = onlineCourses
			} else {
			  this.courseList = [...this.courseList, ...onlineCourses]
			}
			
			this.hasMore = onlineCourses.length >= this.limit
			this.page++
		  } else {
			this.hasMore = false
		  }
		}).catch(() => {
		  this.loading = false
		  uni.showToast({
			title: '加载失败，请重试',
			icon: 'none'
		  })
		})
	  },
	  
	  searchCourses() {
		this.page = 1
		this.hasMore = true
		this.courseList = []
		this.getCourses()
	  },
	  
	  setFilter(type) {
		if (this.activeFilter === type) return
		
		this.activeFilter = type
		this.page = 1
		this.hasMore = true
		this.courseList = []
		this.getCourses()
	  },
	  
	  goToCourseDetail(course) {
		// 只做简单的ID验证
		if (!course || !course.id) {
		  uni.showToast({
			title: '课程信息不完整',
			icon: 'none'
		  });
		  return;
		}
		
		// 直接跳转，不进行预验证
		uni.navigateTo({
		  url: `/pages/course/xianshangxiangxi/xianshangxiangxi?id=${course.id}`
		});
	  },
	  
	  retryCourseList() {
		this.page = 1
		this.hasMore = true
		this.courseList = []
		this.getCourses()
	  }
	},
	onReachBottom() {
	  if (this.hasMore) {
		this.getCourses()
	  }
	},
	onPullDownRefresh() {
	  this.page = 1
	  this.hasMore = true
	  this.courseList = []
	  this.getCourses()
	  setTimeout(() => {
		uni.stopPullDownRefresh()
	  }, 1000)
	}
  }
  </script>
  
  <style lang="scss">
  .container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 30rpx;
  }
  
  .header {
	background-color: $theme-color;
	padding: 20rpx 30rpx;
	
	.search-box {
	  display: flex;
	  align-items: center;
	  background: rgba(247, 247, 247, 1);
	  border: 1px solid rgba(241, 241, 241, 1);
	  border-radius: 35rpx;
	  height: 70rpx;
	  padding: 0 30rpx;
	  
	  .iconfont {
		margin-right: 20rpx;
		font-size: 26rpx;
		color: #666666;
	  }
	  
	  input {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		color: #333;
	  }
	}
  }
  
  .swiper {
	position: relative;
	width: 100%;
	height: 280rpx;
	margin: 0 auto;
	border-radius: 10rpx;
	overflow: hidden;
	margin-bottom: 25rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	
	swiper,
	.swiper-item,
	image {
	  width: 100%;
	  height: 280rpx;
	  border-radius: 10rpx;
	}
  }
  
  .filter-bar {
	display: flex;
	justify-content: space-between;
	margin: 0 30rpx 30rpx;
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx 0;
	
	.filter-item {
	  flex: 1;
	  text-align: center;
	  font-size: 28rpx;
	  color: #666;
	  position: relative;
	  
	  &.active {
		color: $theme-color;
		font-weight: bold;
		
		&:after {
		  content: '';
		  position: absolute;
		  bottom: -10rpx;
		  left: 50%;
		  transform: translateX(-50%);
		  width: 40rpx;
		  height: 4rpx;
		  background-color: $theme-color;
		}
	  }
	}
  }
  
  .course-section {
	padding: 0 30rpx;
	
	.section-title {
	  font-size: 34rpx;
	  font-weight: bold;
	  color: #333;
	  padding: 20rpx 0;
	}
  }
  
  .course-list {
	.course-item {
	  display: flex;
	  background-color: #fff;
	  padding: 24rpx;
	  border-radius: 12rpx;
	  margin-bottom: 20rpx;
	  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.course-left {
	  position: relative;
	  width: 220rpx;
	  height: 220rpx;
	  flex-shrink: 0;
	  
	  image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	  }
	  
	  .lesson-tag {
		position: absolute;
		left: 0;
		top: 0;
		background-color: $theme-color;
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 12rpx;
		border-radius: 8rpx 0 8rpx 0;
	  }
	  
	  .episode-count {
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 20rpx;
		color: #fff;
		background-color: rgba(0,0,0,0.6);
		padding: 4rpx 10rpx;
		border-radius: 0 0 8rpx 0;
	  }
	}
	
	.course-right {
	  flex: 1;
	  padding-left: 24rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}
	
	.course-title {
	  font-size: 30rpx;
	  font-weight: bold;
	  color: #333;
	  margin-bottom: 15rpx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	}
	
	.course-desc {
	  font-size: 26rpx;
	  color: #999;
	  margin-bottom: 30rpx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	}
	
	.course-price {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	
	.price-tag {
	  font-size: 26rpx;
	  color: $theme-color;
	}
	
	.price-value {
	  font-size: 36rpx;
	  font-weight: bold;
	  color: $theme-color;
	}
	
	.old-price {
	  display: inline-block;
	  margin-left: 12rpx;
	  text-decoration: line-through;
	  color: #999;
	  font-size: 24rpx;
	}
	
	.buy-now {
	  width: 130rpx;
	  height: 56rpx;
	  line-height: 56rpx;
	  text-align: center;
	  background-color: $theme-color;
	  color: #fff;
	  font-size: 28rpx;
	  border-radius: 28rpx;
	}
  }
  
  .empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 100rpx;
	
	image {
	  width: 200rpx;
	  height: 200rpx;
	  margin-bottom: 30rpx;
	}
	
	text {
	  font-size: 28rpx;
	  color: #999;
	  margin-bottom: 20rpx;
	}
	
	button {
	  width: 200rpx;
	  height: 80rpx;
	  line-height: 80rpx;
	  background-color: $theme-color;
	  color: #fff;
	  font-size: 28rpx;
	  border-radius: 40rpx;
	}
  }
  
  .loading {
	text-align: center;
	padding: 30rpx 0;
	
	.spinner {
	  width: 40rpx;
	  height: 40rpx;
	  border: 4rpx solid #f3f3f3;
	  border-top: 4rpx solid $theme-color;
	  border-radius: 50%;
	  margin: 0 auto 10rpx;
	  animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
	  0% { transform: rotate(0deg); }
	  100% { transform: rotate(360deg); }
	}
	
	.loading-text {
	  font-size: 26rpx;
	  color: #999;
	}
  }
  
  .mores-txt {
	width: 100%;
	align-items: center;
	justify-content: center;
	height: 70rpx;
	color: #999;
	font-size: 24rpx;
	display: flex;
  }
  </style>